<link rel="import" href="../../bower_components/polymer/polymer.html">
<polymer-element name="ec-login">
  <template>
    <style>
      #container {
        background-color: #E5E5E5;
        font-family: 'RobotoDraft', sans-serif;
        width: 100%;
        height: 100%;
      }
      #login_form {
        width: 280px;
        height: 260px;
        margin-top: 10%;
      }
      a {
        text-decoration: none !important;
        color: #616161;
      }
      #title {
        padding-left:50px;
      }
      #login_button::shadow #ripple {
        color: #FFA726;
      }
      paper-input-decorator /deep/ .focused-underline {
          /* line color when the input is focused */
          background-color: #FFB74D;
      }
      paper-input-decorator /deep/ #floatedLabelText {
        color: #616161;
      }
    </style>
    <core-ajax
      id="login"
      url="/dashboard/login"
      method="post"
      params='{"username":"{{username}}", "password":"{{password}}"}'
      handleAs="json"
      on-core-response="{{postLogin}}">
    </core-ajax>
    <div horizontal center-justified layout id="container">
      <paper-shadow id="login_form" vertical  layout>
      <paper-shadow><div id="title"><a href="/"><h2>EasyComments<h2></a></div></paper-shadow>
        <paper-input-decorator label="Username" floatingLabel>
           <input id="username" is="core-input" type="text" value="{{username}}"/>
        </paper-input-decorator>
        <paper-input-decorator label="Password" floatingLabel>
           <input id="password" is="core-input" type="password" value="{{password}}"/>
        </paper-input-decorator>
        <paper-button id="login_button" on-click="{{login}}">Login</paper-button>
      </paper-shadow>
    </div>
    <template if="{{has_access}}">
      <ec-dashboard></ec-dashboard>
    </template>
    <paper-toast id="toast1" text="Wrong username or password."></paper-toast>
  </template>
  <script>
    Polymer('ec-login', {
        login: function() {
          this.shadowRoot.querySelector("#login").go();
        },
        postLogin: function(event, response) {
          this.has_access = response.response.has_access;
          if(this.has_access === false){
            this.shadowRoot.querySelector('#toast1').show();
          }else{
            //hide the form
            this.shadowRoot.querySelector("#container").hidden = true;
          }
        },
        ready: function(){
          this.has_access = false;
        },
    });
  </script>
</polymer-element>